<template>
  <div class="evaluate">
    <div class="illustrated_body">
      <div class="details">
        <ul>
          <li
            v-for="(list, index) of tabs"
            :class="{'active': active === list.value}"
            :key="index"
            @click="active = list.value"
          >
            {{list.label}}<span v-if="list.count != null">({{list.count}})</span>
          </li>
        </ul>
      </div>
      <div class="illustrated_tab" v-show="active === 'first'"><!--图文详情-->
        <div class="illustrated_text">
          <p class="illustrated_brand">品牌：{{details.brandName}}</p>
          <ul class="illustrated_details">
            <li>款号：{{details.styCode}}</li>
            <li>品名：{{details.styName}}</li>
            <li>年份：{{details.yearName}}</li>
            <li>性别：{{details.sexName}}</li>
          </ul>
          <ul class="illustrated_details">
            <li>季节：{{details.seasonName}}</li>
            <li>商品性质：{{details.slveLenName}}</li>
            <li>促销标签：{{details.lineName}}</li>
            <li>产品线：{{details.promotTypeName}}</li>
          </ul>
          <ul class="illustrated_details">
            <li>波段：{{details.bandName}}</li>
            <li>风格：{{details.seriesName}}</li>
            <li>客群：{{details.custName}}</li>
            <li></li>
          </ul>
          <div class="last_dom">
            <p>商品FAB：{{details.styFab}}</p>
          </div>
        </div>
        <div class="illustrated_img" v-html="details.styDetail">

        </div>
      </div>
      <div class="ff-evaluate_tab" v-show="active === 'second'">
        <div class="ff-evaluate-overall">
          <div class="ff-evaluate-overall-score">
            总评分<span class="ff-evaluate-score-active">{{details.evaluateTotal? details.evaluateTotal.totalScore : 0}}</span>分
          </div>
          <div class="ff-evaluate-overall-tag" v-if="details.evaluateTotal">
            <div class="ff-evaluate-overall-label">
              <ff-rate
                v-for="(item, index) of scoreList"
                :key="index"
                class="roteRate"
                :sum="5"
                :count="item.score != 'NaN'?Number(item.score) : 0"
                :showHead="true"
                :head="item.tag"
                :showText="true"
                :disabled="true"
              ></ff-rate>
            </div>
            <ul class="ff-evaluate-overall-label ff-evaluate-overall-tag-list">
              <li v-for="(list, index) of tagList" :key="index" :class="list.isGood === 0? 'colorOrange' : 'colorGreen'">
                {{list.tag}} ({{list.score}})
              </li>
            </ul>
          </div>
          <div class="f-evaluate-overall-no" v-if="noPeople">还未有人对该商品评价，你可以做第一个评价的人哦。</div>
        </div>
        <div class="ff-evaluate-body-score-class">
          <ul>
            <li>
              评分标准
            </li>
            <li v-for="(list, index) of tips" :key="index">
              <div>{{index + 1}}分</div>
              <div>{{list}}</div>
            </li>
          </ul>
        </div>
        <div class="ff-evaluate-body">
          <ul class="ff-evaluate-body-can-score">
            <li v-for="(list, index) of canScoreList" :key="index">
              <span class="ff-evaluate-body-must">*</span>
              <ff-rate
                class="roteRates"
                v-model="list.sum"
                :showHead="true"
                :head="list.tag"
                :count="list.sum"
                :showText="true"
                :disabled="false"
              ></ff-rate>
            </li>
          </ul>
          <ul class="ff-evaluate-body-can-tag">
            <li v-for="(list, index) of canTagListData" :key="index" @click="changeTag(index)" :class="list.status? 'ff-evaluate-body-can-tag-light' : ''">
              {{list.tag}}
              <div class="ff-evaluate-body-can-tag-active" v-if="list.status"></div>
            </li>
          </ul>
          <textarea class="ff-evaluate-textarea" placeholder="请输入您的评价" v-model.trim="text"></textarea>
          <div class="ff-evaluate-body-btns">
            <button class="ff-evaluate-body-btn" @click="submitEvaluation">提交评价</button>
          </div>
        </div>
        <div class="ff-evaluate-page-list">
          <h2>全部评价  {{total}}</h2>
          <ul>
            <li class="ff-evaluate-page-single" v-for="(list, index) of evaluatePageList" :key="index">
              <span class="ff-evaluate-page-single-name">{{list.userName}}</span>
              <div class="ff-evaluate-page-single-content">
                <ff-rate
                  class="selectivity_rate"
                  :sum="5"
                  :count="Number(list.totalScore.toFixed(1))"
                  :showText="true"
                  :disabled="true"
                ></ff-rate>
                <p>{{list.content?list.content:'此用户没有评论'}}</p>
              </div>
              <span class="ff-evaluate-page-single-time">{{list.uptTime}}</span>
            </li>
          </ul>
          <div style="text-align: center;padding: 15px 0">
            <pagination :CurrentPage.sync="currentPage" :total="total" :PageSize="PageSize" @change="CurrentPageChange"></pagination>
          </div>
        </div>
      </div>
    </div>
    <confirm-dialog
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :content="dialog.content"
      :show-cancel="false"
      confirm-class="ff-evaluate-good--button"
      confirm-name="确定"
    ></confirm-dialog>
  </div>

</template>
<script type="text/javascript">
  import FfRate from '@/components/grid/rate.vue'
  import pagination from '@/components/pagination/pagination'
  import confirmDialog from '@/components/dialog/confirmDialog.vue'
  export default {
    data() {
      return {
        tabs: [
          {
            label: '宝贝详情',
            value: 'first'
          },
          {
            label: '评价',
            value: 'second',
            count: 0
          }
        ],
        active: 'first',
        noPeople: false,//没有人评价过
        canTagListData: [],
        listTotal: 0,//评价总数
        currentPage: 1,//当前页
        total: 0,//total
        PageSize: 10,
        evaluatePageList: [],//评价列表信息
        text: '',//评价内容
        dialog: {
          visible: false,
          title: '',
          content: ''
        },
        tips: ['非常不满意','不满意','一般','满意','非常满意']
      }
    },
    props: {
      details: {
        type: Object
      }
    },
    computed: {
      /*评分集合*/
      scoreList () {
        return this.details && this.details.evaluateTotal && this.details.evaluateTotal.tagList.filter(obj => obj.type === 1) || []
      },
      /*标签集合*/
      tagList () {
        return this.details && this.details.evaluateTotal && this.details.evaluateTotal.tagList.filter(obj => obj.type === 0) || []
      },
      /*可评分集合*/
      canScoreList () {
        return this.details && this.details.evaluateTags && this.details.evaluateTags.filter(obj => obj.type === 1).map(obj => Object.assign({
          sum: 0
        }, obj)) || []
      }
    },
    mounted() {
      this.active = this.$route.query.status? this.$route.query.status : 'first';

    },
    watch: {
      details () {
        this.canTagListData = this.details && this.details.evaluateTags && this.details.evaluateTags.filter(obj => obj.type === 0).map(obj => Object.assign({
          status: false
        }, obj)) || [];
        this.getEvaluateList();
      }
    },
    components: {
      FfRate,
      pagination,
      confirmDialog
    },
    methods: {
      /*评价标签改变*/
      changeTag (index) {
        let data = this.canTagListData.find(obj => obj.groupId === this.canTagListData[index].groupId && obj.id !== this.canTagListData[index].id);
        if(data.status) return;
        this.canTagListData[index].status = !this.canTagListData[index].status;
      },
      /*获取评价列表数据*/
      getEvaluateList () {
        this.$http({
          url: '/api/SelPro/GetStyEvaluateItem',
          method: 'post',
          data: {
            pageNum: this.currentPage,
            pageSize: this.PageSize,
            styId: this.details.styId
          }
        }).then(res => {
          let data = res.data;
          if(data.code === 1) {
            this.total = data.generalPageInfo && data.generalPageInfo.total || 0;
            this.evaluatePageList = data.data;
            this.tabs[1].count = this.total;
          }
          this.noPeople = this.evaluatePageList && this.evaluatePageList.length > 0? false : true;
        })
      },
      /*当前页变化*/
      CurrentPageChange () {
        this.getEvaluateList();
      },
      /*提交评价*/
      submitEvaluation () {
        let arr = this.canScoreList.filter(obj => obj.sum > 0).map(obj => ({
          score: obj.sum,
          tagId: obj.id
        }));
        if(arr.length === 0 || arr.length !== this.canScoreList.length) return this.dialog = {
          visible: true,
          title: '请为商品打分哦!'
        }
        this.canTagListData.map(obj => {
          obj.status && arr.push({
            score: 0,
            tagId: obj.id
          })
        })
        this.$http({
          url: '/api/SelPro/InsertStyEvaluate',
          method: 'post',
          data: {
            content: this.text,
            itemList: arr,
            strId: this.$store.state.userId,
            styId: this.details.styId
          }
        }).then(res => {
          let data = res.data;
          if(data.code === 1) {
            this.$message({
              dangerouslyUseHTMLString: true,
              iconClass: 'no-icon',
              offset: 100,
              customClass: 'succeed-collect-message',
              message: '<span class="succeed-collect">评价成功</span>'
            });
            this.$store.commit('saveEvaluation', {
              ecode: this.details.styCode
            })
            this.getEvaluateList();
            this.$emit('refresh');
            this.text = '';
          }else {
            this.dialog = {
              visible: true,
              title: '评价失败!'
            }
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped type="text/less">
  .evaluate {

    .illustrated_body {
      border: 1px solid #D8D8D8;
      margin-bottom: 45px;
    }

    .illustrated_tab {
      font-size: 12px;
      font-family: MicrosoftYaHei;
      color: rgba(87, 87, 87, 1);
    }

    .illustrated_brand {
      margin-bottom: 8px;
    }

    .illustrated_text {
      padding: 30px;
      border-bottom: 1px solid #D8D8D8
    }

    .details {

      ul {
        display: flex;
        flex-direction: row;
        background: #F5F5F5;
        align-items: center;
        border-bottom: 1px solid #D8D8D8;
        font-size: 14px;

        li {
          width: 180px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-top: 4px solid #F5F5F5;
          border-right: 1px solid #D8D8D8;
          position: relative;
          cursor: pointer;
        }

        li.active {
          border-top: 4px solid #FD6442;
          background: #fff;
        }

        li.active:before {
          content: '';
          display: block;
          position: absolute;
          bottom: -1px;
          height: 1px;
          width: 100%;
          background: #fff
        }

      }
    }
    .illustrated_details {
      display: flex;
      justify-content: space-around;
      flex-direction: row;

      li {
        text-align: left;
        margin-bottom: 8px;
        width: 100%;
      }

    }
    .last_dom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        text-align: left;
        width: 100%;
      }
      p:first-child {
        flex: 1;
      }
      p:last-child {
        flex: 3;
      }
    }
    .illustrated_img {
      padding-bottom: 50px;
    }

    .evaluate_header {
      padding: 30px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #D8D8D8
    }
  }
</style>
<style lang="less">
  .tag-style () {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 1;
    color: #afafaf;
    border: 1px solid #d3d3d3;
    font-size: 12px;
    cursor: pointer;
    position: relative;
  }
  .ff-evaluate-good--button {
    margin-left: 0;
  }
  .evaluate {
    .ff-evaluate_tab {
      .ff-evaluate-overall {
        display: flex;
        padding: 30px;
        border-bottom: 1px solid #d8d8d8;
        .ff-evaluate-overall-score {
          font-size: 14px;
          color: #575757;
          min-width: 200px;
        }
        .ff-evaluate-score-active {
          color: #e80000;
          font-size: 40px;
          padding: 0 10px;
        }
        .ff-evaluate-overall-tag {
          width: 100%;
          .ff-evaluate-overall-label {
            width: 100%;
            display: flex;
          }
          .roteRate {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            width: 25%;
            margin: 5px 0;
          }
          .ff-evaluate-overall-tag-list {
            margin-top: 20px;
            li {
              .tag-style();
              cursor: default;
              margin: 0 10px 8px 0;
            }
            .colorOrange {
              color: #f26a6a;
              border-color: #f26a6a;
            }
            .colorGreen {
              color: #27951f;
              border-color: #27951f;
            }
          }
        }
        .f-evaluate-overall-no {

        }
      }
      .ff-evaluate-body-score-class {
        background-color: #FFF6F1;
        padding: 10px 0 10px 50px;
        margin-bottom: 10px;
        ul {
          display: flex;
          justify-content: center;
          li {
            flex: 1;
            color: #888;
            text-align: center;
            div {
              line-height: 16px;
            }
            &:first-child {
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #333;
            }
          }
        }
      }
      .ff-evaluate-body {
        padding: 30px;
        .ff-evaluate-body-can-score {
          overflow: hidden;
          li {
            display: flex;
            float: left;
            width: 25%;
            align-items: center;
            .ff-evaluate-body-must {
              color: #e80000;
            }
            .roteRates {
              display: flex;
              align-items: center;
              flex-wrap: nowrap;
              width: 100%;
              margin: 5px 0;
            }
          }
        }
        .ff-evaluate-body-can-tag {
          margin-top: 20px;
          li {
            .tag-style();
            margin: 0 10px 12px 0;
          }
          .ff-evaluate-body-can-tag-active {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg,transparent 15px,#fd6442 0);
            &::before {
              position: absolute;
              display: inline-block;
              box-sizing: content-box;
              content: "";
              border: 2px solid #fff;
              border-left: 0;
              border-top: 0;
              height: 7px;
              left: 11px;
              bottom: 2px;
              border-radius: 1px;
              -webkit-transform: rotate(45deg) scaleY(1);
              transform: rotate(45deg) scaleY(1);
              width: 3px;
            }
          }
          .ff-evaluate-body-can-tag-light {
            border-color: #fd6442;
            color: #fd6442;
          }
        }
        .ff-evaluate-textarea {
          line-height: 1.5;
          display: block;
          height: 120px;
          padding: 5px 10px;
          border: 1px solid #dcdfe6;
          background-color: #fff;
          box-sizing: border-box;
          font-size: inherit;
          border-radius: 4px;
          transition: border-color .2s cubic-bezier(.645,.045,.355,1);
          width: 100%;
          resize: none;
        }
        .ff-evaluate-body-btns {
          text-align: center;
          .ff-evaluate-body-btn {
            width: 120px;
            height: 40px;
            background: #fd6442;
            border-radius: 2px;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: #fff;
            display: block;
            margin: 20px auto 30px;
            border: none;
            cursor: pointer;
            &:hover {
              opacity: .8;
            }
          }
        }
      }
      .ff-evaluate-page-list {
        padding: 0 30px;
        h2 {
          height: 40px;
          background: #f7f7f7;
          line-height: 40px;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: #1b1b1b;
          padding-left: 20px;
          font-weight: 400;
        }
        .ff-evaluate-page-single {
          padding: 35px 0 25px;
          display: flex;
          color: #575757;
          border-bottom: 1px solid #d8d8d8;
          .ff-evaluate-page-single-name {
            display: inline-block;
            min-width: 180px;
            text-align: center;
          }
          .ff-evaluate-page-single-content {
            width: 650px;
            font-size: 12px;
            .selectivity_rate {
              display: flex;
              flex-wrap: nowrap;
              margin-bottom: 10px;
            }
          }
          .ff-evaluate-page-single-time {
            display: inline-block;
            min-width: 200px;
            text-align: center;
          }
        }
      }
    }
  }
</style>
